<template>
  <div class="volume" :class="{'no-volume': data.length==0}">
         <div v-for="(item, index) in data" class="volume-box" :class="{'volume-box-yellow': item.couponType == '10004' || item.couponType == '10005' || item.couponType == '10006', 'volume-box-blue': item.couponType == '10009' || item.couponType == '10010' || item.couponType == '10011' || item.couponType == '10012', 'volume-box-red': item.couponType == '10001' || item.couponType == '10002' || item.couponType == '10003', 'expired': expiredClass, 'center':item.usefulFlag == '0'}"   :key="item.id" v-if="data.length > 0">
            <div v-if="item.usefulFlag == '0'" class="unableinfo">
                <i></i>
                 {{item.unusableReasonDesc || '商品范围不符合'}}
            </div>

            <img src="/static/images/volume-l.png" alt="" class="volume-i-left">
            <div class="clear">
                <div class="volume-box-left volume-box-info">
                    <h2>{{item.couponName}}</h2>
                    <p class="volume-box-mj">{{item.couponRule}}</p>
                    <p class="volume-box-time">
                      {{item.validityBeginning?item.validityBeginning.split(' ')[0].replace(/-/g,'.'): ''}}&nbsp;-&nbsp;{{item.validityEnding?item.validityEnding.split(' ')[0].replace(/-/g,'.'): ''}}
                    </p>
                </div>
                <div class="volume-box-right volume-box-price">
                     <i>&yen;</i>
                     <span>{{+item.amount | formatPrice}}</span>
                </div>
            </div>
            <div class="line"></div>
            <div class="volume-box-left">
                <span class="volume-box-indu">{{item.couponDesc}}</span>
            </div>
            <div class="volume-box-right volume-box-out" v-if="item.isWillExpire == '1'">
                <span>即将过期</span>
            </div>
            <div class="volume-r-bg" :class="'volume-r-bg'+item.couponStatus">
            </div>

            <i v-if="item.usefulFlag == '1'" class="cheack uncheaked" :class="{'cheaked': item.cheack == 'cheacked'}" @click="cheackFn(item,index)"></i>
         </div>

         <div v-if="data.length==0"  class="no-volume-box">
             <img src="/static/images/no-volume.png" alt="">
             <p>暂无可使用的优惠券~</p>
         </div>



  </div>
</template>
<script>
 import { centerCouponInfo } from '@/service/getData'
 import { cookie } from 'vux'
  export default {
    props:['data', 'info', 'expiredClass', 'Clickok'],
    data(){
      return{
          oneClick: true
      }
    },
    // watch: {
    //   data(){
    //       if(this.Clickok && this.oneClick){
    //           this.$store.dispatch('centerAlldata', this.data);//可用的只执行一次，将数据放到store里面好点击操作
    //           this.oneClick = false
    //       }
    //   }
    // },
    created(){
      if(this.Clickok) {
        this.$store.dispatch('centerAlldata', this.data);
      }
    },
    methods: {
        cheackFn(data, index) {
          if(data.couponType == '10004' || data.couponType == '10005' || data.couponType == '10006') {
            for(var i = 0; i < this.data.length; i++) {
              if( (this.data[i].couponType == '10004' || this.data[i].couponType == '10005' || this.data[i].couponType == '10006') && i != index) {
                if(this.data[i].cheack == 'cheacked' ) {
                  return;
                }
              }
            }
          }
          if(data.couponType == '10010' || data.couponType == '10011') {
            for(var i = 0; i < this.data.length; i++) {
              if( (this.data[i].couponType == '10010' || this.data[i].couponType == '10011') && i != index) {
                if(this.data[i].cheack == 'cheacked' ) {
                  return;
                }
              }
            }
          }
          if(data.cheack == 'cheacked') {
            this.$set(data, 'cheack', 'uncheacked')
          }else {
            this.$set(data, 'cheack', 'cheacked' )
          }
        }
  }

  }
</script>

<style lang="scss" scoped>
    @function _($px) {
        $rem: $px/50;
        @return #{$rem}rem;
   }
   .center div.unableinfo {
    width: _(686);
    height: _(35);
    padding-left: _(55);
    line-height: _(36);
    background-color: #eb4e18;
    text-align: left;
    position: absolute;
    top: _(-45);
    border-radius: _(5);
    font-size: _(22);
    color: #fff !important;

    i {
      position: absolute;
      left: _(20);
      top: _(2);
      width: _(30);
      height:_(30);
      background-image:  url('/static/images/errorwarning.png');
      background-size: 100%;
    }
  }
  .volume {
    text-align: center;
    padding-bottom: 2rem;
  }
  .volume-box {
      position: relative;
      width: _(560);
      height: _(219);
      padding-top: _(28);
      background-color: #fff;
      display: inline-block;
      margin:_(28) 0 0 _(-20);

      &.center {
        width: _(606);
        margin:_(75) 0 0 _(-80);
      }


      i.cheack {
        position: absolute;
        left: _(-60);
        top: 50%;
        margin-top: _(-22);
        width: _(44);
        height: _(44);
        background-size: 100%;
        &.uncheaked {
          background-image: url('/static/images/uncheacked.png');
        }
        &.cheaked {
          background-image: url('/static/images/cheacked.png');
        }
      }
      img {
        height: 100%;
        width: auto !important;
      }

      .volume-i-left {
          position: absolute;
          top: 0;
          left: _(-5);
      }


      .volume-box-info {
        margin-left: _(25);
        text-align: left;
              h2 {
                max-width: 6.6rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: pre;
                font-size: _(30);
                color:#333333;
                height: _(42);
                line-height: _(42);
              }
              .volume-box-mj {
                font-size: _(22);
                color:#ffc001;
              }

              .volume-box-time {
                font-size: _(22);
                color:#bbbbbb;
              }
      }
      .volume-box-price {
          margin-top: _(15);
          margin-right: _(10);
          height: _(88);
          line-height: _(88);
          color: #FFC001;
          i {
              font-size: _(40);
              letter-spacing: _(-0.25);
              text-align:left;
          }
          span {
            font-size: _(57);
            letter-spacing: _(-0.43);
            text-align: left;
          }
      }


      .volume-box-indu {
          display: inline-block;
          margin-left: _(25);
          height: _(30);
          line-height: _(30);
          margin-top: _(21);
          font-size: _(22);
          color:#444444;
          letter-spacing: _(-0.14);
          text-align:left;
      }
      .volume-box-out {
        width: _(102);
        height: _(32);
        line-height: _(32);
        margin-top: _(18);
        margin-right: _(10);
        color: #ffc001;
        border:1px solid #ffc001;;
        font-size: _(18);
        border-radius: _(2);
     }

     .volume-r-bg {
        position: absolute;
        width: _(80);
        top: 0;
        right: _(-80);
        height: _(218);
        background-image: url('/static/images/volume-1.png');
        background-size: 100%;
     }
  }
  .volume-box-left {
    float: left;
  }
  .volume-box-right {
    float: right;
  }
  .clear {
    overflow: hidden;
  }
  .line {
    height: 1px;
    margin: _(12) _(10) 0 _(25);
    background-color: #eeeeee;
  }
  .volume-box-yellow {
      .volume-box-info .volume-box-mj, .volume-box-price, .volume-box-out {
            color: #ffc001;
      }
      .volume-box-out {
          border: 1px solid #ffc001;
      }
      .volume-r-bg {
        background-image: url('/static/images/select-1.png');
      }
  }
  .volume-box-blue {
      .volume-box-info .volume-box-mj, .volume-box-price, .volume-box-out {
            color: #7ed321;
      }
      .volume-box-out {
          border: 1px solid #7ed321;
      }
      .volume-r-bg {
        background-image: url('/static/images/select-2.png');
      }
  }
    .volume-box-red {
      .volume-box-info .volume-box-mj, .volume-box-price, .volume-box-out {
            color: #ff782d;
      }
      .volume-box-out {
          border: 1px solid #ff782d;
      }
      .volume-r-bg {
        background-image: url('/static/images/select-3.png');
      }
  }
.center {
      div,h2,i,span,a,p {
        color: #bbb !important;
      }
      .volume-r-bg {
        background-image: url('/static/images/no-able.png');
      }
      .volume-box-out {
        border: 1px solid #bbb;
      }

}
.no-volume {
  height: 100%;
  position: relative;
  text-align: center;
  padding-bottom: 0;
    .no-volume-box {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      text-align: center;
      height: _(160);
      margin-top: _(-200);
      img {
        width: _(185) !important;
        display: inline-block;
      }

      p {
        font-size: _(26);
        margin-top: _(20);
        color: #999;;
        letter-spacing: _(-0.16);
      }
    }
}
</style>
